<template>
	<view>
		<!-- 选项卡 -->
		<view class="d-flex bg-white a-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item,index) in tabBars" :key="item.name"
			:class="tabIndex === index ? 'tabactive' : ''"
			@click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		
		<view v-if="dataList.length>0">
			<view  v-for="item in dataList" :key="item.id"  class="bg-white machiene-item rounded p-2 mt-2 position-relative">
				<!-- 头部 -->
				<view class='d-flex j-sb py-1 border-bottom'>
				  <view >故障单号：{{item.wechatRepair.orderNums}}</view>
				  <view>
					<text v-if="item.state===0" class="text-danger">待办</text>
					<text v-if="item.state===1" class="text-success">已办</text>
				  </view>
				</view>
				<!-- 基本信息 -->
				<view class="mt-5 border-bottom pb-2">
				  <view class="font-weight ">{{item.wechatRepair.plasmaStationName}}</view>
				  <view>机器：{{item.wechatRepair.shMachine.type}}({{item.wechatRepair.shMachine.macCode}})</view>
				  <view class="content text-ellipsis">故障现象：{{item.wechatRepair.problem}}</view>
				</view>
				<!-- 操作 -->
				<view class="d-flex j-sb pt-2 a-center">
					<view class="font-sm text-muted">创建时间：<text>{{item.wechatRepair.createTime}}</text> </view>
					<view class=" d-flex j-end">
						<view class="border main-rounded-circle border-orange text-orange px-2"  @click="optionHandle('detail',item.id)">{{item.state===0?'处理':'查看详情'}}</view>
					</view>
				</view>
				<view class="position-absolute item-type">{{item.wechatRepair.problemType===1?'机器故障':'耗材故障'}}</view>
				<view class="position-absolute item-level"
				:class="{'bg-danger':item.wechatRepair.problemLevel===1,
						'bg-orange':item.wechatRepair.problemLevel===2,
						'bg-info':item.wechatRepair.problemLevel===3}"
				>{{item.wechatRepair.problemLevel}}级</view>
			</view>
		</view>
		<!-- 没有数据 -->
		
		<view class="d-flex a-center j-center text-light-muted font-sm py-3" v-if="dataList.length>0">
			{{loadtext}}
		</view>
		<no-thing v-else :msg="tabBars[tabIndex].msg"></no-thing>
		
	</view>
</template>

<script>
	import noThing from '@/components/common/no-thing.vue';
	import api from '@/common/api/api.js'
	export default {
		components:{
			noThing
		},
		data() {
			return {
				type:'',
				dataList:[],
				tabIndex:0,
				loadtext:'没有更多了',
				tabBars:[
					{ 
						name:"全部",
						msg:"你还没有维修单",
						state:null
					},
					{
						name:"待办",
						msg:"你还没有待办维修单",
						state:0
					},
					{
						name:"已办",
						msg:"你还没有已办维修单",
						state:1
					}
				],
				pagination:{
					currentPage:1,
					pageSize:6
				}
			}
		},
		onLoad(e){
			this.type = e.type;
			this.init()
		},
		methods: {
			init(){
				this.dataList=[];
				this.pagination.currentPage=1;
				this.getList(false)
			},
			getList(refresh = true, callback = false){
				let self = this;
				let postData={
					...self.pagination,
					state:self.tabBars[self.tabIndex].state
				}
				self.$H.post(this.type==='send'?api.sendRepairList:api.selfRepairList,postData).then(res=>{
					self.dataList = refresh? [...res.content.records]:[...self.dataList,...res.content.records];
					// 恢复加载状态
					self.loadtext = res.content.total > self.pagination.pageSize*self.pagination.currentPage ? '上拉加载更多' : '没有更多了';
				})
			},
			// 切换tab
			changeTab(index){
				this.tabIndex = index;
				this.init()
			},
			/**上拉刷新*/
			onReachBottom(){
				// 是否已经处于加载状态
				if (this.loadtext !== '上拉加载更多') return;
				// 改变加载状态
				this.loadtext = '加载中...'
				this.pagination.currentPage++
				// 请求数据
				this.getList(false)
			},
			optionHandle(type,id){
				let self=this;
				switch (type){
					case 'detail':
						uni.navigateTo({
							url: `/pages/sendRepairDetail/sendRepairDetail?id=${id}&type=${this.type}`,
						})
					break;
					}
				}
		}
	}
</script>

<style scoped>
.item-type{
  font-size: 28upx;
  top:90upx;
  left:0;
  width:140upx;
  height:56upx;
  line-height: 56upx;
  text-align: center;
  background: #c9bebd;
  color:#f9f8f8;
}
.item-level{
	  top:90rpx;
	  right:0;
	  width:80rpx;
	  height:56rpx;
	  line-height: 56rpx;
	  text-align: center;
	  color:#fff;
	  border-bottom-left-radius: 30rpx;
}
</style>
